<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <table border="1" cellspacing="0" width="100%" cellpadding="0">
        <caption style="font-size: 40px"><b>我的购物车</b></caption>
        <tr>
            <th>
                <input type="checkbox" v-model="flag1" @click="allSelect">
            </th>
            <th>编号</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        <tr align="center" v-for="(item,index) in userList">
            <td>
                <input type="checkbox" v-model="item.flag">
            </td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
                <button @click="reduce(index)">-</button>
                {{item.num}}
                <button @click="addNum(index)">+</button>
            </td>
            <td>{{item.total}}</td>
            <td>{{item.remark}}</td>
            <td>
                <button @click="deleteRow(index)">删除</button>
            </td>
        </tr>
        <tr align="right">
            <td colspan="11">
                应付:{{totalMoney}}
                <button @click="getTotalMoney">结算</button>
            </td>
        </tr>
    </table>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            userList:[
                {id:"1",name:"小霸王1",price:200.00,num:"1",total:200.00,remark:"牛逼",flag:false},
                {id:"2",name:"小霸王2",price:300.00,num:"1",total:300.00,remark:"牛逼",flag:false},
                {id:"3",name:"小霸王3",price:200.00,num:"1",total:200.00,remark:"牛逼",flag:false},
                {id:"4",name:"小霸王4",price:100.00,num:"1",total:100.00,remark:"牛逼",flag:false},
                {id:"5",name:"小霸王5",price:50.00,num:"1",total:50.00,remark:"牛逼",flag:false},
                {id:"6",name:"小霸王6",price:10.00,num:"1",total:10.00,remark:"牛逼",flag:false},
            ],
            flag1:false,
            totalMoney:0,
        },
        methods:{
            allSelect:function () {
                this.userList.map(item => item.flag = !this.flag1);
            },
            addNum:function (index) {
                this.userList[index].num++;
                this.getTotal(index);
            },
            reduce:function (index) {
                let element = this.userList[index];
                element.num--;
                if(element.num == 0){
                    this.deleteRow(index);
                }else{
                    this.getTotal(index);
                }
            },
            getTotal:function (index) {
               this.userList[index].total = this.userList[index].num * this.userList[index].price;
            },
            getTotalMoney:function () {
                this.totalMoney = 0;
                for (let i = 0; i < this.userList.length; i++) {
                    let userListElement = this.userList[i];
                    if (userListElement.flag === true){
                        this.totalMoney = this.totalMoney + userListElement.total;
                    }
                }
            },
            deleteRow : function (index) {
                this.userList.splice(index,1);
            }
        }
    });
</script>

</body>
</html>